<template>
  <!-- 最外一层嵌套 -->
  <b-container fluid style="padding: 0">
    <!-- 循环体 -->
    <b-row
      v-for="dynamic in data"
      :key="dynamic.id"
      style="margin-bottom: 3%"
      class="mainDynamicCard"
    >
      <b-container fluid>
        <!-- 卡片最顶部,用户名、时间等 -->
        <b-row class="cardBot">
          <b-col sm="2">
            <b-img
              style="max-width: 85%; margin: 0.5%"
              rounded="circle"
              sizes="10px"
              center
              :src="dynamic.user.avaterUrl"
            />
          </b-col>
          <b-col sm="10" style="padding: 0">
            <b-row>
              <b-col style="font-size: 120%">
                <b-link class="linkStyle" style="margin-left: 4%">
                  {{ dynamic.user.nickName }}
                </b-link>
              </b-col>
              <b-col style="text-align: right; font-weight: 20">
                <span style="margin-left: 4%"
                  ><span>{{ dynamic.time }}</span></span
                >
              </b-col>
            </b-row>
            <pre class="mt-2 mb-0" />
            <b-row>
              <b-col style="font-style: italic; font-weight: bold">
                <span>{{ dynamic.user.signature }}</span>
              </b-col>
            </b-row>
          </b-col>
        </b-row>

        <!-- 卡片中央,动态的内容 -->
        <b-row class="cardBot">
          <p>
            {{ dynamic.content }}
          </p>

          <!-- 多图九宫格 -->
          <!-- 这里有必要记录一下,后端返回的时候有可能imageList不存在,就导致第三层的数据丢失,这里会报错 -->
          <!-- 所以后端要在即使没有图片的情况下返回一个空imageList,才能在下面进行如下判断 -->
          <b-container
            fluid
            v-if="dynamic.imageList.length > 1"
            class="dynamicImg"
          >
            <b-row style="width: 100%; margin: 0">
              <b-col>
                <b-img thumbnail right :src="dynamic.imageList[0].url" />
              </b-col>
              <b-col v-if="dynamic.imageList.length > 1">
                <b-img thumbnail center :src="dynamic.imageList[1].url" />
              </b-col>
              <b-col v-if="dynamic.imageList.length > 2">
                <b-img thumbnail left :src="dynamic.imageList[2].url" />
              </b-col>
            </b-row>
            <b-row
              v-if="dynamic.imageList.length > 3"
              style="width: 100%; margin: 0; margin-top: 0.5%"
            >
              <b-col>
                <b-img thumbnail right :src="dynamic.imageList[3].url" />
              </b-col>
              <b-col v-if="dynamic.imageList.length > 4">
                <b-img thumbnail center :src="dynamic.imageList[4].url" />
              </b-col>
              <b-col v-if="dynamic.imageList.length > 5">
                <b-img thumbnail left :src="dynamic.imageList[5].url" />
              </b-col>
            </b-row>
            <b-row
              v-if="dynamic.imageList.length > 6"
              style="width: 100%; margin: 0; margin-top: 0.5%"
            >
              <b-col>
                <b-img thumbnail right :src="dynamic.imageList[6].url" />
              </b-col>
              <b-col v-if="dynamic.imageList.len > 7">
                <b-img thumbnail center :src="dynamic.imageList[7].url" />
              </b-col>
              <b-col v-if="dynamic.imageList.length > 8">
                <b-img thumbnail left :src="dynamic.imageList[8].url" />
              </b-col>
            </b-row>
          </b-container>

          <!-- 单图 -->
          <b-container
            fluid
            v-if="dynamic.imageList.length == 1"
            class="dynamicImg"
          >
            <b-row style="width: 100%; margin: 0">
              <b-img
                style="width: 90%"
                center
                :src="dynamic.imageList[0].url"
              />
            </b-row>
          </b-container>
        </b-row>

        <!-- 收放评论区,点赞,评论 的这一行-->
        <b-row class="cardBotRight">
          <b-col style="text-align: left">
            <span style="margin-left: 4%">
              <b-icon icon="eye" />
              {{ dynamic.view }}
            </span>
          </b-col>
          <b-col>
            <!-- 点赞 -->
            <b-link
              style="margin: 1%; color: red; margin-left: 8%"
              class="linkStyle"
              @click="takeHeart(dynamic.id)"
            >
              <b-icon
                style="color: red"
                :icon="dynamic.likeVisible ? 'heart-fill' : 'heart '"
              />
              <span>{{ dynamic.like }}</span>
              <!-- <b-icon icon="heart-fill" style="color:red;"/> -->
            </b-link>

            <!-- 评论 -->
            <b-link
              v-b-toggle="dynamic.id + ''"
              style="margin: 1%; margin-left: 8%"
              class="linkStyle"
            >
              <b-icon icon="chat" />
              <span>{{ dynamic.commentNum }}</span>
              <!-- <b-icon icon="heart-fill" style="color:red;"/> -->
            </b-link>
          </b-col>
        </b-row>

        <!-- 评论编辑区 被最上面的评论按钮收放-->
        <b-collapse visible :id="dynamic.id + ''">
          <b-row style="text-align: right">
            <div style="margin-top: 1%">
              <b-form-textarea
                class="editorCard"
                id="textarea"
                v-model="editorText"
                placeholder="有什么活尽管整"
                rows="3"
                max-rows="6"
              />
              <pre class="mt-1 mb-0" />

              <!-- 展开评论,清空,评论一行 -->
              <b-row>
                <!-- 展开评论区↓↓↓ -->
                <b-col style="text-align: left">
                  <b-link
                    v-if="dynamic.commentList.length > 0"
                    @click="extendComment(dynamic.id)"
                    class="linkStyle"
                  >
                    {{
                      dynamic.commentVisible ? "收起评论区↑↑↑" : "展开评论区↓↓↓"
                    }}
                  </b-link>
                </b-col>
                <b-col style="text-align: right">
                  <b-button style="margin: 0.5%" variant="outline-danger">
                    清 空
                  </b-button>
                  <b-button
                    @click="sendMessage(dynamic.id, editorText)"
                    style="margin: 0.5%"
                    variant="outline-success"
                  >
                    评 论
                  </b-button>
                </b-col>
              </b-row>
            </div>
          </b-row>

          <!-- <b-collapse visible id="comment"> -->
          <!-- <transition enter-active-class="animated fadeInUp"> -->
          <!-- 评论被展开区 -->
          <b-row
            v-for="comment in dynamic.commentList"
            :key="comment.id"
            v-show="dynamic.commentVisible"
            class="commentCard"
          >
            <b-container style="padding: 1" fluid>
              <b-row>
                <b-col>
                  <b-img
                    style="max-width: 10%; margin: 0.5%"
                    rounded="circle"
                    sizes="10px"
                    thumbnail
                    :src="comment.user.avaterUrl"
                  />
                  <span style="margin-left: 4%">{{
                    comment.user.nickName
                  }}</span>
                  <span style="margin-left: 4%">{{ comment.time }}</span>
                </b-col>
              </b-row>

              <!-- 评论内容 -->
              <b-row style="text-align: left">
                <b-col>
                  <p style="margin-top: 2%">
                    {{ comment.content }}
                  </p>
                </b-col>
              </b-row>

              <!-- 点赞行 -->
              <b-row style="text-align: right">
                <!-- border-bottom: 1.5px dotted rgb(0, 0, 0); -->
                <b-col>
                  <!-- 回复 -->
                  <!-- 下拉回复旧样式 -->
                  <!-- v-b-toggle="comment.id + 'respond'" -->
                  <b-link
                    v-b-modal.toRespond
                    @click="setResponder(comment)"
                    class="linkStyle"
                  >
                    回复
                  </b-link>
                  <!-- 赞 -->
                  <b-link
                    style="margin: 0.8%; color: red; margin-left: 8%"
                    class="linkStyle"
                    @click="takeHeart(comment.id)"
                  >
                    <b-icon
                      style="color: red"
                      :icon="comment.likeVisible ? 'heart-fill' : 'heart '"
                    />
                    <span>{{ comment.like }}</span>
                    <!-- <b-icon icon="heart-fill" style="color:red;"/> -->
                  </b-link>
                  <!-- 评论 -->
                  <b-link
                    v-b-toggle="comment.id + ''"
                    style="margin: 0.8%; margin-left: 3%"
                    class="linkStyle"
                  >
                    <b-icon icon="chat" />
                    <span>{{ comment.commentNum }}</span>
                    <!-- <b-icon icon="heart-fill" style="color:red;"/> -->
                  </b-link>
                </b-col>
              </b-row>
              <!-- 下拉的回复框 -->
              <!-- <b-collapse :id="comment.id + 'respond'">
                <b-row>
                  <b-form-input
                    class="editorCardInternal"
                    v-model="text"
                    placeholder="有什么活尽管整"
                  />
                  <b-button style="width: 20%" variant="outline-success">
                    发送
                  </b-button>
                </b-row>
              </b-collapse> -->

              <!-- 楼中楼 -->
              <b-collapse visible :id="comment.id + ''">
                <b-row v-for="ctoc in comment.commentList" :key="ctoc.id">
                  <pre class="mt-3 mb-0" />
                  <!-- 循环体 -->
                  <b-row>
                    <b-col sm="2">
                      <b-link class="linkStyle">
                        {{ ctoc.user.nickName }}
                      </b-link>
                    </b-col>
                    <b-col sm="8">
                      <p>
                        回复:
                        <b-link class="linkStyle">
                          {{ ctoc.respondWho }}
                        </b-link>
                        {{ ctoc.content }}
                      </p>
                    </b-col>
                    <b-col sm="2" style="text-align: right">
                      <!-- 回复 -->
                      <!-- 下拉回复旧样式 -->
                      <!-- v-b-toggle="ctoc.id + ''" -->
                      <b-link
                        v-b-modal.toRespond
                        @click="setResponder(ctoc)"
                        class="linkStyle"
                      >
                        回复
                      </b-link>
                    </b-col>
                  </b-row>
                  <b-row>
                    <span style="color: rgba(106, 106, 106, 0.747)">
                      {{ ctoc.time }}
                    </span>
                  </b-row>

                  <!-- 下拉的回复框 -->
                  <!-- <b-collapse :id="ctoc.id + ''">
                    <b-row>
                      <b-form-input
                        class="editorCardInternal"
                        v-model="text"
                        placeholder="有什么活尽管整"
                      />
                      <b-button style="width: 20%" variant="outline-success">
                        发送
                      </b-button>
                    </b-row>
                  </b-collapse> -->

                  <!-- 回复用户样式
                    <b-row>
                      <b-col>
                        <b-link class="linkStyle">用户名</b-link>
                        <span style="color: rgba(106, 106, 106, 0.747)">
                          xxx时间前
                        </span>
                      </b-col>
                      <b-col sm="7">
                        <p>
                          <b-link class="linkStyle">@用户名</b-link>
                          测试楼中楼楼中楼楼中楼楼
                        </p>
                      </b-col>
                      <b-col sm="2" style="text-align: right">
                        回复
                        <b-link class="linkStyle">回复</b-link>
                      </b-col>
                    </b-row> -->
                </b-row>
              </b-collapse>
            </b-container>
          </b-row>
          <!-- </transition> -->
          <!-- </b-collapse> -->
        </b-collapse>
      </b-container>
    </b-row>

    <!-- 回复模拟框 -->
    <b-modal
      id="toRespond"
      size="lg"
      centered
      hide-backdrop
      hide-header-close
      no-close-on-backdrop
      ok-title="发送"
      cancel-title="取消"
      @ok="sendMessage(theRespondUserId, CommentEditText)"
      content-class="shadow"
      :title="'回复@' + respondWho + ' :' + respondWhat"
    >
      <b-container fluid>
        <b-row>
          <b-form-textarea
            class="editorCard"
            id="textarea"
            v-model="CommentEditText"
            placeholder="有什么活尽管整"
            rows="3"
            max-rows="6"
          />
        </b-row>
      </b-container>
    </b-modal>
  </b-container>
</template>


<script>
import axios from "axios";
import moment from "moment";
export default {
  name: "MainDynamicCard",
  data() {
    return {
      comment111: "333",
      //一个动态的数据参数
      data: [],
      //评论编辑框的文本,双向绑定
      editorText: "",
      CommentEditText: "",
      //此时点击的是哪个id容器
      extendCommentId: 0,
      //回复对象,仅是显示文本
      respondWho: null,
      respondWhat: "十五字十五字十五字",
      theRespondUserId: null,
      //请求什么类型的动态
      id: null,
    };
  },
  methods: {
    //评论展开触发器
    extendComment(id) {
      // console.log(this.extendCommentId,id);
      this.extendCommentId = id;
      // console.log(this.extendCommentId,id);
      // this.ifextend = !this.ifextend;
      //遍历data修改状态
      for (var val of this.data) {
        if (id == val.id) {
          val.commentVisible = !val.commentVisible;
        }
      }
    },

    //点赞操作
    takeHeart(id) {
      //遍历data修改状态
      for (var val of this.data) {
        if (id == val.id) {
          val.likeVisible = !val.likeVisible;
          if (val.likeVisible == true) {
            console.log("更改id为:" + id + "的动态的点赞状态,赞+1");
            val.like++;
          }
          if (val.likeVisible == false) {
            console.log("更改id为:" + id + "的动态的点赞状态,赞-1");
            val.like--;
          }
        }
        for (var val1 of val.commentList) {
          if (id == val1.id) {
            val1.likeVisible = !val1.likeVisible;
            if (val1.likeVisible == true) {
              console.log("更改id为:" + id + "的评论的点赞状态,赞+1");
              val1.like++;
            }
            if (val1.likeVisible == false) {
              console.log("更改id为:" + id + "的评论的点赞状态,赞-1");
              val1.like--;
            }
          }
        }
      }
    },
    //设置当前回复的对象
    setResponder(comment) {
      this.respondWho = comment.user.nickName;
      this.theRespondUserId = comment.id;
      this.respondWhat = comment.content;
    },
    sendMessage(id, message) {
      //数据库还不知道怎么设计的,暂时是用数据库id查询这个用户
      console.log("向id为:" + id + "的用户发送" + message);
      this.showResult(true);
    },
    //发送评论或回复成功失败的提示框
    showResult(result) {
      const h = this.$createElement;
      const titleVNode = h("p", ["return"]);
      var messageVNode = null;
      if (result) {
        messageVNode = h("div", { class: ["foobar"] }, [
          h("p", { style: { color: "green" } }, ["发送成功"]),
        ]);
      } else {
        messageVNode = h("div", { class: ["foobar"] }, [
          h("p", { style: { color: "red" } }, ["发送失败"]),
        ]);
      }

      this.$bvModal.msgBoxOk([messageVNode], {
        title: [titleVNode],
        centered: true,
        hideBackdrop: true,
      });
    },
    //给data的部分 添加展开状态布尔  点赞状态布尔 设置时间格式
    addBoolToData() {
      moment.locale("zh-cn");
      for (var val of this.data) {
        //转换一下时间的格式
        // console.log("日志",moment(val.time).diff(moment(moment().format('L')), 'days'));
        if (moment(val.time).diff(moment(moment().format("L")), "days") < 0) {
          val.time = moment(val.time).format("YYYY-MM-DD,HH:MM");
        } else {
          val.time = moment(val.time).startOf("hour").fromNow();
        }

        for (var val1 of val.commentList) {
          if (
            moment(val1.time).diff(moment(moment().format("L")), "days") < 0
          ) {
            val1.time = moment(val1.time).format("YYYY-MM-DD,HH:MM");
          } else {
            val1.time = moment(val1.time).startOf("hour").fromNow();
          }
          for (var val2 of val1.commentList) {
            if (
              moment(val2.time).diff(moment(moment().format("L")), "days") < 0
            ) {
              val2.time = moment(val2.time).format("YYYY-MM-DD,HH:MM");
            } else {
              val2.time = moment(val2.time).startOf("hour").fromNow();
            }
          }
        }
      }
    },
    //请求动态数据并封装
    getDynamicData() {
      //请求动态信息
      //这里要先请求服务器数据然后set一下现在的data
      //loading转圈圈
      console.log(this.id);
      this.$store.commit("setLoadingVisible", true);
      axios
        .get("http://localhost:8081/dynamic/getDynamic", {
          params: {
            id: this.id,
          },
        })
        .then((res) => {
          // state.dynamicCard = JSON.stringify(res.data);
          this.data = res.data;
          console.log("data--->", this.data);
          this.$store.commit("setLoadingVisible", false);
        })
        .catch((err) => {
          console.error(err);
        });

      //在vuex中覆盖率data后再覆盖到本页面中
      // this.data = this.$store.state.dynamicCard;
      // console.log("data--->", this.$store.state.dynamicCard);
      // console.log("给data新赋值");
    },
  },
  created() {
    this.id = this.$store.state.id;
    this.getDynamicData();
  },
  mounted() {},
};
</script>

<style scoped lang="css">
.cardBot {
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.commentCard {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 0, 0, 0.04);
  background-color: rgba(205, 194, 194, 0.12);
  margin: 0.5%;
  margin-top: 3%;
  margin-bottom: 2%;
}
.cardBotRight {
  text-align: right;
  border-bottom: 1px solid rgba(106, 106, 106, 0.12);
}
.xuxian {
  border: 2px dashed rgba(0, 0, 0, 0.12);
  margin-top: 5%;
  background-color: rgba(0, 0, 0, 0.12);
}
.dynamicImg {
  margin: 0.5%;
  overflow: hidden;
  max-height: 500px;
  font-style: initial;
}
.linkStyle {
  text-decoration: none;
}
.editorCard {
  border-radius: 5px;
}
.editorCardInternal {
  border-radius: 100px;
  width: 80%;
}
</style>
// @ok:点击确定触发的事件 @hidden:关闭 model触发的事件
// ok-title="保存":确定按钮的 text cancel-titile="关闭":关闭按钮的text
// :no-close-on-backdrop="布尔值":点击背景是否关闭model
// hide-footer:隐藏底部“确定、关闭”按钮 hide-header:隐藏头部
// hide-header-close:隐藏右上方 "x" 